<template>
	<view class="housejoin-record-packbox">
		<view class="housejoin-record-box">
			<view v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
				class="record-item relative" 
				v-for="(item, index) in resLists" :key="index" 
				:style="{
					'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/join-record-bg.png)`
					}">
				<view class="record-box-info flex-align-items-center">
					<view class="record-cover flex-all-center" 
						:style="{'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/img-box-bg.png)`}">
						<image :src="item.path" class="record-cover-award" mode="aspectFill" />
					</view>
		
					<view class="info-box" style="width: 80%;">
						<view class="font-hanserif-bold flex-justify-content-between flex-align-items-center">
							<view style="font-size: 30rpx;">{{ item.name }}</view>
							<view class="flex-align-items-center">
								<image
									style="width: 22rpx;height: 27rpx;margin: 0 4rpx 0 8rpx;"
									:src="commonConfigs.domainFrontFileLink + '/files/images/welfareHouse/icon-hot.png'" 
								/>
								<view style="color: #FF8B1D;">{{ item.heat }}</view>
							</view>
						</view>
						
						<view class="truncate" style="width: 60%;">{{ item.tag_txt }}</view>
						
						<view class="font-hanserif-bold flex flex-justify-content-between flex-align-items-center"
							style="margin-top: 18rpx;color: #FF8B1D;"
						>
							<view>
								<text>总价值：</text>
								<text>{{item.total_recovery_price_balance}}</text>
							</view>
							<view style="color: #666666;">{{ item.end_time }}</view>
						</view>
					</view>
					
				</view>

				<!-- 奖品类型：1赏品 2优惠券 3机能 -->
				<scroll-view class="scroll-x" scroll-x>
					<view class="flex">
						<view v-for="(InfoDetail, InfoIndex) in item.item_list" :key="InfoIndex" class="prize-info-box relative">
							<view class="prize-info-content relative flex-all-center">
								<image v-if="InfoDetail.type === 1 || InfoDetail.type === 3" class="bg" 
									:src="commonConfigs.domainFrontFileLink + '/files/images/welfareHouse/goods-bg.png'" mode=""></image>
								
								<image :src="InfoDetail.path" class="info-cover-img" mode="heightFix" v-if="InfoDetail.type === 1"/>
								
								<image :src="InfoDetail.path" class="info-cover-balance" mode="heightFix" v-if="InfoDetail.type === 3"/>
								
								<view :style="{'background-image' : `url(${InfoDetail.path})` }" class="info-cover-coupon relative" v-if="InfoDetail.type === 2">
									
									<view class="coupon-title truncate">{{ InfoDetail.subtitile }}</view>
									
									<view class="coupon-dates flex-direction-column flex-start">
										<view style="text-align: left;">有效期至:</view>
										<view style="white-space: nowrap;">{{ InfoDetail.end_time }}</view>
									</view>
									
									<view class="coupon-price truncate">
										<text>¥{{ InfoDetail.recovery_price }}</text>
										<view style="font-size: 10rpx;">抵扣券</view>
									</view>
								</view>
							</view>
							<view class="truncate" style="width: 144rpx;margin: 8rpx 0;">{{ InfoDetail.reward_item_name }}</view>
							<view style="color: #FF8B1D;">
								<text v-if="InfoDetail.type === 3">{{ InfoDetail.num }}</text>
								<text v-else>{{ InfoDetail.recovery_price_balance }}</text>
								<text>机能</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'comHouseJoinRecord',
		props: {
			resLists: Array
		},
		data() {
			return {};
		},
		computed:{
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
	};
</script>

<style lang="scss" scoped>
	.housejoin-record-packbox {
		color: #111111;
		font-size: 24rpx;
		
		.housejoin-record-box {
			width: 686rpx;
			height: 100%;
			margin: 0 auto;
			color: #111111;
			
			.record-item {
				width: 100%;
				height: 517rpx;
				background-size: 100% 100%;
				margin-top: 20rpx;
				padding: 42rpx 30rpx 30rpx 32rpx;

				.record-box-info {
					padding-bottom: 28rpx;
					margin-bottom: 22rpx;
					border-bottom: 2rpx solid #DBE0E9;
					
					.record-cover {
						background-size: 100% 100%;
						padding: 10rpx;
						width: 154rpx;
						height: 154rpx;
						margin-right: 18rpx;
						overflow: hidden;
						
						.record-cover-award {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}

				}

				.scroll-x {
					overflow: hidden;
					font-size: 18rpx;
					
					.prize-info-box {
						padding-top: 12rpx;
						margin: 0 12rpx;
						
						.prize-info-content {
							width: 144rpx;
							height: 144rpx;
							
							.info-cover-balance {
								width: 90rpx;
								height: 112rpx;
							}
						}
						
						.info-cover-coupon{
							color: #000;
							text-align: center;
							padding-top: 38rpx;
							margin-bottom: 12rpx;
							width: 130rpx;
							height: 176rpx;
							background-size: 100% 100%;
							
							.coupon-price{
								font-size: 28rpx;
								width: 100%;
							}
							
							.coupon-title{
								font-size: 18rpx;
								border-radius: 18rpx;
								width: 98rpx;
								height: 22rpx;
							}
							
							.coupon-dates{
								margin: 12rpx 0;
								font-size: 12rpx;
							}
						}
						
						.info-cover-img {
							width: 144rpx;
							height: 144rpx;
							border-radius: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
